<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /*
            伪类专门用来表示元素的一种特殊的状态
            比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
            当我们需要为处在这些特殊状态中的元素设置样式时，就可以使用伪类

            所有的伪类都是用:开头的

            给链接定义的样式：
                有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置为4钟不同的状态
                正常的链接：a:link
                访问过的链接：a:visited（只能定义字体颜色）
                鼠标滑过的链接：a:hover
                正在点击的链接：a:active

            :hover和:active也可以为其他元素设置


        */

        a:link{
            color: red;
        }
        a:visited{
            color: greenyellow;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: coral;
        }
        p:hover{
            color: yellowgreen;
        }
        p:active{
            font-size: 33px;
        }

        img{
            width: 166px;
            height: 266px;
        }
        img:hover{
            width: 400px;
            height: 600px;
        }
        img:active{
            width: 600px;
            height: 800px;
        }


        /*

            其他：
                获取焦点：
                    :focus
                选中的元素:
                    ::selection    注意这个伪类在火狐中应该这么写：    ::moz-selection
        */

        #p1::selection{
           background-color: red;
        }

        input:focus{
            background-color: yellowgreen;
        }


    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度一下，你就知道</a><br>
    <a href="https://www.taobao123456.com">淘宝网</a>
    <p>给我设置一些样式吧</p>

    <img src="../img/001.jpg" alt="赵洁琼">

    <hr />

    <input type="text" />
    <p id="p1">选中我啊，记得是选中我</p>
    
</body>
</html>